<template>
  <n-el tag="div" class="div-two02-three01">
    <n-el tag="div" class="main-box" v-for="item in data_list" :key="item">
      <n-el tag="div">
        商品名称：{{ item.name_commodity }}<br>
        说明：{{ item.commodity_description }}<br>
        现价：{{ item.commodity_current_price }} 元
        销售额：{{ item.monthly_sales }} 单
      </n-el>
    </n-el>
  </n-el>
  <n-el tag="div" class="div-two02-three03">
    <n-pagination
      v-model:page="data_list_page"
      :page-count="data_list_total_page"
      @update-page="pageChange"
    />
  </n-el>
</template>


<script setup lang="ts" name="HZForecast07">
import { onMounted } from "vue";
import * as curdApi from "/@api/hz-curd-api";
import { ref } from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: "pie-simple",
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  showLegend: {
    type: Boolean,
    default: true,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "信息卡片",
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  apiPath: {
    // api路径
    type: String,
    default: "",
  },
  chartsType: {
    // 图表类型
    type: String,
    default: "HZForecast07",
  },
  methodType: {
    type: String, // 请求方式
    default: "get",
  },
});

const isShowAll = ref(true);
const state = reactive({
  staffWordCountTimer: null,
});
const data_list = ref([]);
const data_list_category = ref(0);
const data_list_page = ref(1);
const data_list_total_page = ref(1);

onMounted(() => {
  loadDataList();
});

function categoryChange(category: any) {
  // 如果切换的是同一个分类，不做处理
  if (data_list_category.value === category) {
    return;
  }
  // 切换显示的内容
  if (category === 0) {
    isShowAll.value = true;
    // 销毁所有定时器
    if (state.staffWordCountTimer != null) {
      clearInterval(state.staffWordCountTimer);
    }
  } else {
    isShowAll.value = false;
  }
  data_list_category.value = category;
  data_list_page.value = 1;
  loadDataList();
}

function loadDataList(data: any) {
  getCom(data).then((res: any) => {
    data_list.value = res.data.items;
    data_list_total_page.value = res.data.totalPage;
  });
}

const getCom = async (data: any) => {
  return await curdApi.goGet(
    {
      category: data_list_category.value,
      page: data_list_page.value,
      size: 30,
      media_id: data,
    },
    "/api/jd/jdsale/"
  );
};

function pageChange(page: any) {
  data_list_page.value = page;
  loadDataList();
}

const refreshCharts = (data: any) => {
  loadDataList(data);
};

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
});
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-two02-three01 {
  width: 100%;
  height: 93%;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 82vh;
  font-size: 12px;
}

.main-box {
  width: 98%;
  height: auto;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #3636368e;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add this line */
  margin-top: 5%;
}

.main-box:hover {
  background-color: #73737377;
}

.main-box:active {
  border-color: #2b2b2b79;
  background-color: #2b2b2b79;
}

.div-two02-three03 {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1%;
}
</style>